<script setup>
import { ref } from 'vue'
import prop from './props'
import RenderVnode from '../Common/RenderVnode'
defineOptions({
  name: 'LeeDropDown',
})
const props = defineProps(prop)
const emit = defineEmits(['select', 'change'])
const tooltipRef = ref(null)
const handleClickItem = item => {
  if (item.disabled) {
    return
  }
  emit('select', item)
  if (props.hideAfterClick) {
    tooltipRef.value?.hide()
  }
}
const handleChange = () => {
  emit('change')
}
defineExpose({
  show: () => {
    tooltipRef.value?.show()
  },
  hide: () => {
    tooltipRef.value?.hide()
  },
})
</script>

<template>
  <div class="lee-dropdown">
    <!-- 触发元素 -->
    <lee-toolTip
      ref="tooltipRef"
      :trigger="trigger"
      :placement="placement"
      :manual="manual"
      :open-delay="openDelay"
      :close-delay="closeDelay"
      @change="handleChange"
    >
      <slot />
      <template #content>
        <ul class="lee-dropdown__menu">
          <template v-for="item in menuOptions" :key="item.key">
            <li v-if="item.divide" class="divided-placeholder"></li>
            <li
              :id="`lee-item-${item.key}`"
              class="lee-dropdown__item"
              :class="{
                'is-disabled': item.disabled,
              }"
              @click="handleClickItem(item)"
            >
              <RenderVnode :v-node="item.label" />
            </li>
          </template>
        </ul>
      </template>
    </lee-toolTip>
  </div>
</template>

<style scoped>
.bar {
  color: red;
}
</style>
